<template>
  <div class="add-car">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: true, resize: true }"
      :title="taskListId ? '编辑车辆配件' : '添加车辆配件'"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
      :width="'700px'"
    >
      <el-form
        :model="fm.ps"
        :ref="fm.fname"
        :label-width="'100px'"
        class="demo-form-inline"
        @keyup.enter.native="onSubmit"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="车辆铭牌" prop="reserveStime" style="">
              <UploadImg
                :imgName="'nameImg1'"
                @getImgUrl="setImgUrl"
                :url="'/company/upload'"
                :src="fileBaseUrl+nameImg1"
                :tiptext="urlImg ? '可以更换图片' : ''"
                :ps="{ userName: uname }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="reserveStime" style="">
              <UploadImg
                :imgName="'nameImg2'"
                @getImgUrl="setImgUrl"
                :tiptext="urlImg ? '可以更换图片' : ''"
                :url="'/company/upload'"
                :src="fileBaseUrl+nameImg2"
                :ps="{ userName: uname }"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发动机号" prop="engineNum">
              <el-input
                v-model="fm.ps.engineNum"
                placeholder="请输入发动机号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车架号" prop="vinNum">
              <el-input v-model="fm.ps.vinNum" placeholder="请输入车架号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="配件名称" prop="partsName">
              <el-input
                v-model="fm.ps.partsName"
                placeholder="请输入配件名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配件规格" prop="partsNorms">
              <el-input
                v-model="fm.ps.partsNorms"
                placeholder="请输入配件规格"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配件标号" prop="partsLabel">
              <el-input
                v-model="fm.ps.partsLabel"
                placeholder="请输入配件标号"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="销售商家" prop="partsCompany">
              <el-input
                placeholder="请输入销售商家"
                v-model="fm.ps.partsCompany"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="partsPhone">
              <el-input
                placeholder="请输入联系电话"
                v-model="fm.ps.partsPhone"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配件价格" prop="partsPrice">
              <el-input
                placeholder="请输入配件价格"
                v-model="fm.ps.partsPrice"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-col>
            <el-form-item prop="find">
              <el-button
                @click="onSubmit"
                :disabled="fm.sb.load"
                type="primary"
              >
                {{ fm.sb.text }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UploadImg from "@/components/UploadImg";
import elDragDialog from "@/directive/el-drag-dialog";
import {
  addVehicleParts,
  findVehicleParts,
  modifyVehicleParts,
} from "@/api/services/logistics.service";
export default {
  name: "AddTaskList",
  directives: { elDragDialog },
  props: ["state", "taskListId", "carId", "urlImg"],
  components: { UploadImg },
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },
  data() {
    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,
      isShowMap: false,
      md: { state: this.state },
      fm: {
        fname: "AddMaintenance",
        sb: { load: false, text: "增加" },
        ps: {
          carPlateUrl: "", // 车辆名牌的Url 多个逗号凭借
          engineNum: "", // 发动机号码
          partsCompany: "", // 销售商家
          partsLabel: "", // 配件标号
          partsName: "", // 配件 名称
          partsNorms: "", // 配件规格
          partsPhone: "", // 联系电话
          partsPrice: "", // 配件价格
          vinNum: "", // 车架号码
          vehicleId: this.taskListId, // 车辆ID
        },
      },

      nameImg1: null,
      nameImg2: null,
    };
  },
  created() {
    if (!!this.taskListId) {
      this.init();
    }
    if (!!this.urlImg) {
      this.nameImg1 = this.urlImg.split(",")[0];
      this.nameImg2 = this.urlImg.split(",")[1];
      console.log(this.urlImg.split(","), " thi. caiId");
    }
  },
  methods: {
    // 上传图片
    setImgUrl(e) {
      if (!e) return;
      this[e.name] = e.url;
      this.fm.ps.carPlateUrl = `${this.nameImg1},${this.nameImg2}`;
      console.log(this.fm.ps.carPlateUrl, "this.fm.ps.carPlateUrl ");
    },
    init() {
      this.getDgList();
    },
    getDgList() {
      let loading = this.U.qloading("数据请求中...");
      findVehicleParts({ partsId: this.taskListId })
        .then((res) => {
          console.log("res123", res);
          this.U.qclose(loading);
          const { code, data, carPlateUrl, engineNum, vinNum } = res;
          if (code === 1) {
            this.fm.ps = data;
            this.fm.ps.vinNum = vinNum;
            const arrImg = carPlateUrl && carPlateUrl.split(",");
            this.fm.ps.engineNum = engineNum;
            this.nameImg1 = arrImg[0];
            this.nameImg2 = arrImg[1];
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },

    /* 关闭弹框 */
    closeMd() {
      this.$emit("getaddListMdState", false);
    },
    /**
     * 表单提交=--- 查询
     */
    onSubmit() {
      this.$refs[this.fm.fname].validate((valid) => {
        if (!valid) {
          this.U.qerror("请填写必填项");
          return false;
        } else {
          this.fm.sb.load = true;
          const ft = !!this.taskListId ? modifyVehicleParts : addVehicleParts;
          if (!!this.taskListId) {
            this.fm.ps.carPlateUrl = `${this.nameImg1},${this.nameImg2}`;
          } else if (!!this.urlImg) {
            this.fm.ps.carPlateUrl = this.urlImg;
          }
          const pd = {
            ...this.fm.ps,
            partsId: this.fm.ps.id,
            vehicleId: this.carId.id,
          };
          ft(pd)
            .then((res) => {
              if (res.code == 1) {
                this.closeMd();
                this.U.qsuccess("提交成功");
                // 调用父组件方法-重新加载数据
                that.$emit("reloadDg");
                this.fm.sb.load = false;
              } else {
                this.U.qsuccess(res.msg);
                this.fm.sb.load = false;
              }
            })
            .catch((err) => {
              this.fm.sb.load = false;
            });
        }
      });
    },
  },
};
</script>

